<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>用户管理</title>
	<%@include file="/WEB-INF/views/include/treeview.jsp" %>
	<script type="text/javascript">
		$(document).ready(function() {
			let _mainFrame = window.top.document.getElementById('mainFrame');
			const bodyHeight = $(_mainFrame).height();
			const headerHeight = $('.card-header').outerHeight(true) || 0;
			const ztreePadding = parseInt($('#ztree').css('padding-top') || 0) + parseInt($('#ztree').css('padding-bottom') || 0);
			console.log('bodyHeight: ',bodyHeight,'headerHeight: ',headerHeight,'ztreePadding: ',ztreePadding)
			$('#ztree').height(bodyHeight - headerHeight - ztreePadding);
			refreshTree();
		});
		let setting = {
			data:{simpleData:{enable:true,idKey:"id",pIdKey:"parentId",rootPId:'0'}}
			,callback:{onClick:function(event, treeId, treeNode){
					const id = treeNode.id == '0' ? '' :treeNode.id;
					console.log(treeNode)
					let srcPath = "${ctxAdmin}/sys/user/list?office.id=" + treeNode.id;
					$('#userFrame').attr("src",srcPath);
				}
			}
		};
		function refreshTree(){
			$.getJSON("${ctxAdmin}/sys/office/officeData",function(data){
				let zTree = $.fn.zTree.init($("#ztree"), setting, data);
				ztreeNodesExpand(true,zTree,2,null,null);
			});
		}
	</script>
	<style>
		#ztree {width: 100%;height: 100%;overflow: auto;}
		/*.ztree li a:hover {position: absolute;height: auto;
			background: #FFF;
			padding: 4px 10px;
			box-shadow: 0px 0px 2px 2px rgb(63 81 181 / 36%);
		}*/
	</style>
</head>
<body>
	<div class="page-content">
		<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-md">
			<div class="sidebar-content">
				<div class="card">
					<div class="card-header bg-transparent header-elements-inline p-2">
						<span class="font-weight-bold">组织机构</span>
						<div class="header-elements">
							<button class="btn btn-sm btn-outline alpha-success text-success" onclick="refreshTree()" title="刷新">
								<i class="icon-database-refresh"></i></button>
						</div>
					</div>
					<div class="card-body p-0">
						<div id="ztree" class="ztree"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="content-wrapper">
			<iframe id="userFrame" name="userFrame" src="${ctxAdmin}/sys/user/list"></iframe>
		</div>
	</div>
</body>
</html>